<template>
	<view>
		<image mode="widthFix" class="images" :src="$IMG_URL+'/uploads/20241219/097da6bec54714d95c80feca5bbaab81.png'">
		</image>
		<nav-bar></nav-bar>
		<view class="kmbg ">
			<view style="background: #fff;padding:0.1px 15px 10px;border-radius: 20rpx;">

				<view v-for="(item,inx) in categorylist.config" :key="inx" class="flex-ju-b mt15">
					<view class="flex-a-i">
						<image mode="widthFix" class="imagemang mr10" v-if="inx==0" :src="qiandao"></image>
						<image mode="widthFix" class="imagemang mr10" v-if="inx==1" :src="yaoqing"></image>
						<image mode="widthFix" class="imagemang mr10" v-if="inx==2" :src="geren"></image>
						<image mode="widthFix" class="imagemang mr10" v-if="inx==3" :src="xiaji"></image>
						<view>
							<view class="jusnsd" style="font-weight: bold;">{{item.info}}</view>
							<view class="dsss size24">免费次数+1</view>
						</view>
					</view>
					<view @click="gotdf(inx)" class="qianwang flex-ju-c size24">前往</view>
				</view>
				<!-- <view class="flex-ju-b mt15">
					<view class="flex-a-i">
						<image mode="widthFix" class="imagemang mr10" :src="qiandao"></image>
						<view>
							<view class="jusnsd" style="font-weight: bold;">33</view>
							<view class="dsss size24">免费次数+1</view>
						</view>
					</view>
					<view @click="goguanggao" class="qianwang flex-ju-c size24">前往</view>
				</view> -->

			</view>

			<view class="mt15 " style="background: #fff;padding: 15px 10px;border-radius: 20rpx;">
				<view class="flex-ju-b bordert">
					<view class="">我的任务记录</view>
					<view class="dscss">剩余：{{categorylist.count}}次</view>
				</view>

				<view v-for="(item,k) in categorylist.list" :key="k" class="flex-ju-b mt15 bordert">
					<view class="">
						<view class="jusnsd">{{item.source_type_cn}}</view>
						<view class="color999 mt5 size24">{{item.create_time}}</view>
					</view>
					<view v-if="item.is_use" class="dsss" style="color:#ccc;">已使用</view>
					<view v-else class="dsss">未使用</view>
				</view>

			</view>

		</view>
	</view>
</template>

<script>
	import NavBar from './components/navbar.vue';
	import qiandao from './img/qiandao.png'
	import yaoqing from './img/yaoqing.png'
	import geren from './img/geren.png'
	import xiaji from './img/xiaji.png'
	export default {
		components: {
			NavBar
		},
		data() {
			return {
				qiandao,
				geren,
				xiaji,
				yaoqing,
				categorylist: {
					config: [],
					count: 0,
					list: []
				}
			}
		},
		onLoad() {
			this.$http('v1.freeconfig', {}).then((res) => {
				if (res.code == 1) {

					this.categorylist = res.data
				}
			})

			
		},
		methods: {
			goguanggao() {
				uni.showLoading()
				rewardedVideoAd.show().then(res => {
					uni.hideLoading()
				}).catch(err => {
					uni.hideLoading()
				})
			},
			gotdf(index) {
				if (index == 1) {
					uni.navigateTo({
						url: "/pages/app/yaoqing"
					})
				} else if (index == 2) {
					uni.switchTab({
						url: "/pages/index/two_open_components/things-list"
					})
				} else if (index == 3) {
					uni.navigateTo({
						url: "/pages/app/yaoqing"
					})
				} else {
					uni.navigateTo({
						url: "/pages/index/qiandao"
					})
				}
			}
		}
	}
</script>

<style>
	page {
		background: #ECF6FB;
	}

	.bordert {
		padding-bottom: 15px;
		border-bottom: 1px solid #ECF6FB;
	}

	.dscss {
		color: #44A944;
	}

	.qianwang {
		color: #fff;
		width: 120rpx;
		height: 60rpx;
		background: #5DE06C;
		border-radius: 30rpx;
	}

	.dsss {
		color: #7BEA8C;
	}

	.jusnsd {
		font-size: 28rpx;
	}

	.size24 {
		font-size: 24rpx;
	}

	.coshus {
		width: 100rpx;
		height: 100rpx;

		border-radius: 10rpx;
		background: #ECF6FB;
	}

	.imagemang {
		width: 100rpx;
	}

	.tian {
		flex-direction: column;
		display: flex;
		background: #ECF6FB;
		margin-left: 5px;
		margin-right: 5px;
		border-radius: 16rpx;
		padding-top: 12px;
		padding-bottom: 12px;
	}

	.kmbg {
		position: relative;
		padding: 12px;
		padding-top: 350rpx;
	}

	.images {
		width: 100%;
		position: absolute;
		top: 0;
	}
</style>